iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0

What is Flexbox?

  • Flexbox = Flexible Box
  • "CSS3 Flexbox was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities." by Mozilla

Terms


Final Html & CSS

https://ithelp.ithome.com.tw/upload/images/20210909/20130362dspltk4ia4.pnghttps://ithelp.ithome.com.tw/upload/images/20210909/20130362nV21MRpeFO.png
*Just replaced my editor Notepad++ with Visual Studio Code for more useful components.


Display inline, horizontal, and vertical alignment with Flex

1. inline
Before
https://ithelp.ithome.com.tw/upload/images/20210909/201303624JskS5xntc.png

After

main{
    display:flex;
	background-color:#cccccc;
}
main>.item{
	flex:none;/*none = the item is fixed */
	width:300px;margin:10px;
	background-color:#ffcccc;
}

https://ithelp.ithome.com.tw/upload/images/20210909/201303621N8Ts8wETV.png

2. horizontal alignment
Before
https://ithelp.ithome.com.tw/upload/images/20210909/20130362p0M8eS3aZi.png

Afer: try justify-content:center , or flex-end, stretch(default setting, also known as “flex-start”)

main{
    display:flex;
    justify-content:center;
	background-color:#cccccc;
}

https://ithelp.ithome.com.tw/upload/images/20210909/201303621N8Ts8wETV.png

3. vertical alignment
Before
https://ithelp.ithome.com.tw/upload/images/20210909/201303621N8Ts8wETV.png

Afer: try align-items:flex-start , or flex-end, stretch(default setting)

main{
    display:flex;
    justify-content:center;
    align-items:flex-start;
	background-color:#cccccc;
}
  • align-items:flex-start
    https://ithelp.ithome.com.tw/upload/images/20210909/20130362TtwkzHDKnZ.png

  • align-items:flex-end
    https://ithelp.ithome.com.tw/upload/images/20210909/20130362ZXRrNMuJcg.png


Music of Today: Inner by 9m88

Yes

Like/Share/Follow

Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article./images/emoticon/emoticon12.gif


上一篇
#8 Web Layout: RWD
下一篇
#10 CSS3 Flexbox: nav style setting
系列文
Learn & Play JavaScript -- Entry-Level Front-End Web Development30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言